<template>
  <div class="salary-list-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2 class="page-title">员工薪资列表</h2>
      <el-button type="default" class="back-btn" @click="handleBack">返回</el-button>
    </div>

    <!-- 月份筛选 -->
    <div class="filter-bar">
      <el-date-picker
        v-model="selectedMonth"
        type="month"
        placeholder="选择月份"
        format="YYYY-MM"
        value-format="YYYY-MM"
        @change="fetchSalaryData"
      />
    </div>

    <!-- 薪资表格 -->
    <div class="salary-table-container">
      <el-table
        :data="salaryList"
        border
        stripe
        :header-cell-style="tableHeaderStyle"
        :cell-style="tableCellStyle"
        class="salary-table"
      >
        <!-- 表格列 -->
        <el-table-column label="时间" prop="time" align="center" width="80" />
        <el-table-column label="姓名" prop="name" align="center" width="80" />
        <el-table-column label="职位" prop="position" align="center" width="80" />
        <el-table-column label="基本工资" prop="basicSalary" align="center" width="100" />
        <el-table-column label="绩效工资" prop="performanceSalary" align="center" width="100" />
        <el-table-column label="通讯" prop="communication" align="center" width="80" />
        <el-table-column label="交通" prop="traffic" align="center" width="80" />
        <el-table-column label="餐费" prop="meal" align="center" width="80" />
        <el-table-column label="社保" prop="socialSecurity" align="center" width="80" />
        <el-table-column label="奖金" prop="bonus" align="center" width="80" />
        <el-table-column label="全勤奖" prop="attendanceBonus" align="center" width="80" />
        <el-table-column label="其他" prop="otherIncome" align="center" width="80" />
        <el-table-column label="加班工资" prop="overtimePay" align="center" width="100" />
        <el-table-column label="工龄工资" prop="seniorityPay" align="center" width="100" />
        <el-table-column label="业务提成" prop="commission" align="center" width="100" />
        <el-table-column label="迟到扣款" prop="lateDeduction" align="center" width="100" />
        <el-table-column label="请假扣款" prop="leaveDeduction" align="center" width="100" />
        <el-table-column label="社保扣款" prop="ssDeduction" align="center" width="100" />
        <el-table-column label="其他扣款" prop="otherDeduction" align="center" width="100" />
        <el-table-column label="个人所得税" prop="incomeTax" align="center" width="120" />
        <el-table-column label="应发工资" prop="totalSalary" align="center" width="120" />
        <el-table-column label="备注" prop="remark" align="center" width="100" />
        <el-table-column label="操作" align="center" width="80">
          <template #default="scope">
            <el-button 
              type="primary" 
              size="small" 
              class="modify-btn"
              @click="handleModify(scope.row)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 合计行 -->
      <div class="total-row">
        <div class="total-item">合计</div>
        <div class="total-item">-</div>
        <div class="total-item">-</div>
        <div class="total-item">{{ formatMoney(total.basicSalary) }}</div>
        <div class="total-item">{{ formatMoney(total.performanceSalary) }}</div>
        <div class="total-item">{{ formatMoney(total.communication) }}</div>
        <div class="total-item">{{ formatMoney(total.traffic) }}</div>
        <div class="total-item">{{ formatMoney(total.meal) }}</div>
        <div class="total-item">{{ formatMoney(total.socialSecurity) }}</div>
        <div class="total-item">{{ formatMoney(total.bonus) }}</div>
        <div class="total-item">{{ formatMoney(total.attendanceBonus) }}</div>
        <div class="total-item">{{ formatMoney(total.otherIncome) }}</div>
        <div class="total-item">{{ formatMoney(total.overtimePay) }}</div>
        <div class="total-item">{{ formatMoney(total.seniorityPay) }}</div>
        <div class="total-item">{{ formatMoney(total.commission) }}</div>
        <div class="total-item">{{ formatMoney(total.lateDeduction) }}</div>
        <div class="total-item">{{ formatMoney(total.leaveDeduction) }}</div>
        <div class="total-item">{{ formatMoney(total.ssDeduction) }}</div>
        <div class="total-item">{{ formatMoney(total.otherDeduction) }}</div>
        <div class="total-item">{{ formatMoney(total.incomeTax) }}</div>
        <div class="total-item">{{ formatMoney(total.totalSalary) }}</div>
        <div class="total-item">-</div>
        <div class="total-item">-</div>
      </div>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-bar">
      <span class="page-info">共 {{ totalCount }} 条 共 {{ totalPages }} 页</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        layout="prev, pager, next, jumper, ->, |, total, slot"
        :total="totalCount"
      >
        <template #slot>
          <span class="page-size-text">{{ pageSize }}条/页</span>
          <span class="jump-text">跳至</span>
          <el-input
            v-model="jumpPage"
            type="number"
            min="1"
            :max="totalPages"
            class="jump-input"
            @keyup.enter="handleJump"
          />
          <el-button type="default" size="small" @click="handleJump">确定</el-button>
        </template>
      </el-pagination>
    </div>

    <!-- 修改薪资弹窗 -->
    <el-dialog 
      title="修改员工薪资" 
      v-model="showModifyDialog"
      width="800px"
    >
      <el-form 
        :model="currentSalary" 
        label-width="100px" 
        class="modify-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="时间" prop="time">
              <el-date-picker
                v-model="currentSalary.time"
                type="month"
                format="YYYY.MM"
                value-format="YYYY.MM"
                placeholder="选择时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="currentSalary.name" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位" prop="position">
              <el-input v-model="currentSalary.position" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="基本工资" prop="basicSalary">
              <el-input v-model="currentSalary.basicSalary" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绩效工资" prop="performanceSalary">
              <el-input v-model="currentSalary.performanceSalary" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通讯补贴" prop="communication">
              <el-input v-model="currentSalary.communication" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交通补贴" prop="traffic">
              <el-input v-model="currentSalary.traffic" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="餐费补贴" prop="meal">
              <el-input v-model="currentSalary.meal" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社保" prop="socialSecurity">
              <el-input v-model="currentSalary.socialSecurity" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="currentSalary.remark" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="showModifyDialog = false">取消</el-button>
        <el-button type="primary" @click="saveModify">保存修改</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
// 月份选择
const selectedMonth = ref('2025-11')
// 当前页码/每页条数
const currentPage = ref(1)
const pageSize = ref(10)
const jumpPage = ref(1)

// 薪资列表数据
const salaryList = ref([
  {
    time: '2022.4',
    name: '李艳艳',
    position: '导师',
    basicSalary: 10000,
    performanceSalary: 3000,
    communication: 100,
    traffic: 200,
    meal: 300,
    socialSecurity: 400,
    bonus: '-',
    attendanceBonus: 500,
    otherIncome: '-',
    overtimePay: '-',
    seniorityPay: '-',
    commission: '-',
    lateDeduction: '-',
    leaveDeduction: '-',
    ssDeduction: '-',
    otherDeduction: '-',
    incomeTax: '-',
    totalSalary: 19999,
    remark: '-',
    id: 1
  },
  {
    time: '2022.3',
    name: '王艳',
    position: '导师',
    basicSalary: 10000,
    performanceSalary: 3000,
    communication: 100,
    traffic: 200,
    meal: 300,
    socialSecurity: 400,
    bonus: '-',
    attendanceBonus: 500,
    otherIncome: '-',
    overtimePay: '-',
    seniorityPay: '-',
    commission: '-',
    lateDeduction: '-',
    leaveDeduction: '-',
    ssDeduction: '-',
    otherDeduction: '-',
    incomeTax: '-',
    totalSalary: 19999,
    remark: '-',
    id: 2
  },
  {
    time: '2022.3',
    name: '孔明',
    position: '导师',
    basicSalary: 10000,
    performanceSalary: 3000,
    communication: 100,
    traffic: 200,
    meal: 300,
    socialSecurity: 400,
    bonus: '-',
    attendanceBonus: 500,
    otherIncome: '-',
    overtimePay: '-',
    seniorityPay: '-',
    commission: '-',
    lateDeduction: '-',
    leaveDeduction: '-',
    ssDeduction: '-',
    otherDeduction: '-',
    incomeTax: '-',
    totalSalary: 19999,
    remark: '-',
    id: 3
  }
])

// 弹窗状态
const showModifyDialog = ref(false)
// 当前修改的薪资数据
const currentSalary = ref<any>({})

// 计算合计数据
const total = computed(() => {
  return salaryList.value.reduce((acc, item) => {
    // 处理数值类型（跳过 '-'）
    const getNum = (val: any) => val === '-' ? 0 : Number(val)
    
    return {
      basicSalary: acc.basicSalary + getNum(item.basicSalary),
      performanceSalary: acc.performanceSalary + getNum(item.performanceSalary),
      communication: acc.communication + getNum(item.communication),
      traffic: acc.traffic + getNum(item.traffic),
      meal: acc.meal + getNum(item.meal),
      socialSecurity: acc.socialSecurity + getNum(item.socialSecurity),
      bonus: acc.bonus + getNum(item.bonus),
      attendanceBonus: acc.attendanceBonus + getNum(item.attendanceBonus),
      otherIncome: acc.otherIncome + getNum(item.otherIncome),
      overtimePay: acc.overtimePay + getNum(item.overtimePay),
      seniorityPay: acc.seniorityPay + getNum(item.seniorityPay),
      commission: acc.commission + getNum(item.commission),
      lateDeduction: acc.lateDeduction + getNum(item.lateDeduction),
      leaveDeduction: acc.leaveDeduction + getNum(item.leaveDeduction),
      ssDeduction: acc.ssDeduction + getNum(item.ssDeduction),
      otherDeduction: acc.otherDeduction + getNum(item.otherDeduction),
      incomeTax: acc.incomeTax + getNum(item.incomeTax),
      totalSalary: acc.totalSalary + getNum(item.totalSalary),
    }
  }, {
    basicSalary: 0,
    performanceSalary: 0,
    communication: 0,
    traffic: 0,
    meal: 0,
    socialSecurity: 0,
    bonus: 0,
    attendanceBonus: 0,
    otherIncome: 0,
    overtimePay: 0,
    seniorityPay: 0,
    commission: 0,
    lateDeduction: 0,
    leaveDeduction: 0,
    ssDeduction: 0,
    otherDeduction: 0,
    incomeTax: 0,
    totalSalary: 0,
  })
})

// 总条数/总页数
const totalCount = computed(() => salaryList.value.length)
const totalPages = computed(() => Math.ceil(totalCount.value / pageSize.value))

// 表格样式
const tableHeaderStyle = {
  'background-color': '#f5f7fa',
  'font-weight': '500',
  'color': '#4e5969'
}
const tableCellStyle = {
  'padding': '8px 0'
}

// 格式化金额显示
const formatMoney = (val: number | string) => {
  if (val === '-' || val === 0) return val === 0 ? '-' : val
  return `¥${Number(val).toLocaleString()}`
}

// 获取薪资数据（模拟接口请求）
const fetchSalaryData = () => {
  // 实际项目中根据 selectedMonth 请求对应月份数据
  ElMessage.info(`已加载 ${selectedMonth.value} 月份薪资数据`)
}

// 返回上一页
const handleBack = () => {
  // 实际项目中执行路由返回
   router.back()
}

// 修改薪资
const handleModify = (row: any) => {
  currentSalary.value = { ...row }
  showModifyDialog.value = true
}

// 保存修改
const saveModify = () => {
  // 实际项目中提交修改到后端
  const index = salaryList.value.findIndex(item => item.id === currentSalary.value.id)
  if (index > -1) {
    salaryList.value[index] = { ...currentSalary.value }
  }
  showModifyDialog.value = false
  ElMessage.success('薪资修改成功')
}

// 分页操作
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  jumpPage.value = 1
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  jumpPage.value = val
}
const handleJump = () => {
  if (jumpPage.value < 1 || jumpPage.value > totalPages.value) {
    ElMessage.warning('页码超出范围')
    jumpPage.value = currentPage.value
    return
  }
  currentPage.value = jumpPage.value
}

// 页面加载时获取数据
onMounted(() => {
  fetchSalaryData()
})
</script>

<style scoped>
.salary-list-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
  font-family: "Microsoft YaHei", sans-serif;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
}

.page-title {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin: 0;
}

.back-btn {
  padding: 6px 16px;
  font-size: 14px;
}

/* 筛选栏 */
.filter-bar {
  margin-bottom: 20px;
}

/* 表格容器 */
.salary-table-container {
  margin-bottom: 20px;
}

.salary-table {
  --el-table-row-hover-bg-color: #f0f7ff;
}

/* 合计行 */
.total-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border: 1px solid #eaeaea;
  border-top: none;
  background-color: #f9fafc;
}

.total-item {
  text-align: center;
  padding: 0 8px;
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
}

/* 分页区域 */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
}

.page-info {
  color: #666;
  margin-right: 20px;
}

:deep(.el-pagination) {
  --el-pagination-item-active-bg-color: #409eff;
}

.page-size-text {
  margin-right: 10px;
  color: #666;
}

.jump-text {
  margin: 0 5px;
  color: #666;
}

.jump-input {
  width: 60px;
  margin: 0 5px;
}

/* 修改按钮 */
.modify-btn {
  background-color: #ff9900;
  border-color: #ff9900;
  color: #fff;
  padding: 4px 12px;
}

.modify-btn:hover {
  background-color: #e68a00;
  border-color: #e68a00;
}

/* 修改弹窗 */
.modify-form {
  margin-top: 10px;
}
</style>